<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Netty</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/client.css}">
    <link rel="shortcut icon" th:href="@{/ico/favicon.ico}">
</head>
<body>
<div class="layui-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;">
        <legend style="margin-left: 40%;">基于《Netty》聊天界面</legend>
    </fieldset>
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <blockquote class="layui-elem-quote">用户信息</blockquote>
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户Id</label>
                        <div class="layui-input-inline">
                            <input id="userId" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">接收人Id</label>
                        <div class="layui-input-inline">
                            <input id="toUserId" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="SOCKET.start()" type="button">建立连接</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-col-md8">
            <blockquote class="layui-elem-quote">接收信息区</blockquote>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>消息记录</legend>
            </fieldset>
            <div class="layui-tab layui-tab-card" style="height: 200px;overflow: auto">
                <div id="msgDiv">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">消息</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" id="msg"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="SOCKET.sendMsg()">发送消息
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="application/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<!--layui-->
<script type="application/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script>
    var ws = null;
    var layer = null;

    $(function () {
        Layui.init();
    });

    var Layui = {
        /**
         * 初始化layui
         */
        init: () => {
            layui.use(['layer'], function () {
                layer = layui.layer;
            });
        }
    }

    /**
     * WebSocket 相关
     */
    var SOCKET = {

        /**
         * 存放消息div
         */
        $msgDiv: $("#msgDiv"),
        /**
         * websocket对象
         */
        ws: null,
        /**
         * websocket 连接地址
         */
        url: "http://localhost:8081/chat",
        /**
         * 开始建立连接
         * @returns {boolean}
         */
        start: () => {
            if (typeof (WebSocket) == "undefined") {
                layer.msg('您的浏览器不支持WebSocket', {icon: 5, time: 1500})
                return false;
            }
            var userId = $("#userId").val();
            if (userId === '' || userId == null) {
                layer.msg('请输入您的用户Id', {icon: 5, time: 1500})
                return false;
            }
            SOCKET.url = SOCKET.url.replace("https", "ws").replace("http", "ws");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            if (SOCKET.ws != null) {
                SOCKET.ws.close();
                SOCKET.ws = null;
            }
            SOCKET.ws = new WebSocket(SOCKET.url +'?userId='+ userId);
            //打开事件
            SOCKET.ws.onopen = SOCKET.onOpen;
            //关闭事件
            SOCKET.ws.onclose = SOCKET.onClose;
            //发生了错误事件
            SOCKET.ws.onerror = SOCKET.onError;
            // 接收消息
            SOCKET.ws.onmessage = SOCKET.onMessage;
        },
        /**
         * 成功建立
         */
        onOpen: () => {
            layer.msg('已建立WebSocket连接', {icon: 1, time: 1500})
        },
        /**
         * 接收服务端推送消息
         */
        onMessage: (msg) => {
            msg = JSON.parse(msg.data)
            SOCKET.$msgDiv.append('' +
                '<div class="other-msg-container">' +
                '   <img class="left-img" src="/images/left.png">' +
                '   <div class="other-msg msg-common">' +
                '       <p class="student">用户名：' + msg.sender + '</p><p class="chat">' + msg.msg + '</p>' +
                '   </div>' +
                '</div>');
            SOCKET.scroolBottom();
        },
        /**
         * 连接发生错误
         */
        onError: () => {
            layer.msg('websocket发生了错误', {icon: 5, time: 1500})
        },
        /**
         * 连接关闭
         */
        onClose: () => {
            layer.msg('websocket已关闭', {icon: 5, time: 1500})
        },
        /**
         * 发送消息
         */
        sendMsg: () => {

            var msg = $("#msg").val();
            if (msg === '' || msg == null) {
                layer.msg('消息内容不能为空', {icon: 5, time: 1500});
                return;
            }
            var receiver = $("#toUserId").val();
            if (receiver === '' || receiver == null) {
                layer.msg('请输入接收人', {icon: 5, time: 1500});
                return;
            }
            var msgObj = {
                "receiver": receiver,
                "msg": msg
            };
            if (SOCKET.ws && SOCKET.ws.readyState === 1) {
                SOCKET.ws.send(JSON.stringify(msgObj));
                SOCKET.$msgDiv.append('' +
                    '<div class="my-msg-container">' +
                    '   <img class="right-img" src="/images/right.png">' +
                    '   <div class="my-msg msg-common">' +
                    '       <p class="student">用户名：' + $("#userId").val() + '</p><p class="chat">' + msgObj.msg + '</p>' +
                    '   </div>' +
                    '</div>');
                SOCKET.scroolBottom();
                $("#msg").val('')
            } else {
                layer.msg('请检查连接是否正常？', {icon: 5, time: 1500});
            }
        },
        /**
         * 滚动至底部
         */
        scroolBottom: () => {
            var $div = document.getElementById("msgDiv");
            $div.scrollTop = $div.scrollHeight;
        },
        /**
         * 断开连接
         */
        disConnect: () => {
            if (SOCKET.ws) {
                SOCKET.ws.close();
            }
        }
    }

    window.onbeforeunload = function () {
        SOCKET.disConnect();
    }
</script>
</body>
</html>
